﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Default</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>
    
</head>
<body>
    <div class="layui-container">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>卡片面板</legend>
        </fieldset>

        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">图片接口</div>
                        <div class="layui-card-body">
                            <button class="layui-btn layui-btn-warm" onclick="SelectImsge()">上传图片</button>
                            <div id="img"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">卡片面板</div>
                        <div class="layui-card-body">
                            结合 layui 的栅格系统<br>
                            轻松实现响应式布局
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">标题</div>
                        <div class="layui-card-body">
                            内容
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Content/layui/layui.all.js"></script>
    <script>
        wx.config({
            debug: true,//调试模式   当为tru时，开启调试模式
            appId: '@ViewBag.AppId',
            timestamp: '@ViewBag.timestamp',//签名时间戳
            nonceStr: '@ViewBag.nonceStr', //生成签名的随机串
            signature: '@ViewBag.signature',//签名
            jsApiList: ['chooseImage', 'uploadImage', 'getLocalImgData', 'downloadImage'],
            success: function () {
                alert("配置成功");
            },
            fail: function () {
                alert("配置失败");
            }
        });

        function SelectImsge() {
            wx.chooseImage({
                count: 5, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    var _html = "";
                    for (var i in res.localIds) {
                        var photoSrc = res.localIds[i];
                        _html = _html + '<br>图片' + i + ':<img src="' + photoSrc + '" height="200" width="200" />\n';
                    }
                    $("#img").html(_html);
                }
            });
        }


    </script>
</body>
</html>
